<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 导入jQuery库 -->
        <script type="text/javascript" src="../../lib/jquery/jquery-1.11.3.min.js" ></script>
	</head>
	<body>
	    <fieldset>
        <legend><h1>获得上传文件信息</h1></legend>
        <input type="file" id="file" name="file" />
        <button id="fbtn">得到文件信息</button>
        </fieldset>
        <script>
            $("#fbtn").click(function(){
                var files = $("#file");
                console.log("file name : ", files[0].name)
                console.log("files:", files);
                console.log("files长度:", files.length);
                console.log("files[0]:", files[0]);
                console.log("files[0].files:", files[0].files);
                console.log("files[0].files.length:", files[0].files.length);
                console.log("files[0].files.[0]:", files[0].files[0]);//这个才是真正的文件对象
            });
        </script>
        <fieldset>
        <legend><h1>ajax提交表单内容和文件</h1></legend>
            <form action="" method="" enctype="multipart/form-data" id="formData_id">
                <input name="username" value="bart" />
                <input type="file" name="excelFile" />
                <input type="button" id="submitForm" />
            </form>
        </fieldset>
        <script>
            $("#submitForm").click(function(){
                var formData = new FormData(window.document.getElementById("formData_id"));
                console.log(formData);
                $.ajax({
                    type: "POST",
                    url: "/excelController/importExcel",
                    dataType:"json",
                    data: form,
                    processData: false,
                    contentType: false,
                    mimeType: "multipart/form-data",
                    success: function(data){
                        console.log("succes : "+ data);
                    },
                    error: function(err) {
                        console.log("error happed : "+err);
                    }
                });
            });
        </script>
	</body>
</html>
